<template>
  <div>
    <h1>预约列表</h1>
    <table>
      <thead>
        <tr>
          <th>用户名</th>
          <th>身份证号</th>
          <th>科室</th>
          <th>日期</th>
          <th>时间</th>
          <th>医生姓名</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="record in records" :key="record.id">
          <td>{{ record.username }}</td>
          <td>{{ record.idCard }}</td>
          <td>{{ record.department }}</td>
          <td>{{ record.date }}</td>
          <td>{{ record.time }}</td>
          <td>{{ record.doctorName }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      records: []
    };
  },
  mounted() {
    this.fetchRecords();
  },
  methods: {
    async fetchRecords() {
      try {
        const response = await axios.get('api/list');
        this.records = response.data.records;
      } catch (error) {
        console.error('获取数据失败:', error);
      }
    }
  }
};
</script>

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
}
th {
  background-color: #f2f2f2;
}
</style>
